<docs>
  ## 首页
</docs>
<template>
  <div class="container home">
    <!-- 搜索 -->
    <div class="search">
      <h3 class="title">首页</h3>
      <div class="searchBar">
        <input @click="GET_history(1)" @focus="GET_history(1)" v-model="form.qwgjz" />
        <span
          v-show="showWord"
          class="searchIcon iconfont icon-search"
          @click="GET_history(1)"
        >请输入您要查询的职位</span>
      </div>
      <div class="searchContent">
        <div class="bar_wrap">
          <div :class="[arrow_flag == 2 && showFlag?'item _active':'item']" @click="point(2)">
            职位名称
            <i class="arrow"></i>
          </div>
          <div :class="[arrow_flag == 1 && showFlag?'item _active':'item']" @click="point(1)">
            工作地区
            <i class="arrow"></i>
          </div>
          <div :class="[arrow_flag == 4 && showFlag?'item _active':'item']" @click="point(4)">
            期望薪酬
            <i class="arrow"></i>
          </div>
          <div :class="[arrow_flag == 5 && showFlag?'item _active':'item']" @click="point(5)">
            更多
            <i class="arrow"></i>
          </div>
        </div>
        <!-- 职业 -->
        <div
          class="search-select-wrap"
          v-show="arrow_flag==2 && showFlag"
          @click="showFlag=false;arrow_flag = 0"
        >
          <div class="search-select" @click.stop>
            <div class="search-select-content">
              <div class="select-content-left">
                <p
                  :class="resetObj.dwzy == item.dmid?'active':''"
                  v-for="item in objSearchAll.zyjsww_wh_cygwxxb"
                  :key="item.dmid"
                  @click="searchOption(item.dmid, 'dwzy')"
                >{{item.dmmc}}</p>
              </div>
              <div class="select-content-right">
                <p
                  :class="{active:zyclassArr.indexOf(item.dmid)!=-1}"
                  v-for="item in objSearchAll.zyjsww_wh_cygwxxb_two"
                  :key="item.dmid"
                  @click="searchOption(item.dmid, 'dwzy', true)"
                >{{item.dmmc}}</p>
              </div>
            </div>
            <div class="search_btn_wrap">
              <div @click="reSet('dwzy')">重置</div>
              <div @click="befor_search()">确定</div>
            </div>
          </div>
        </div>
        <!-- 工作地点 -->
        <div
          class="search-select-wrap"
          v-show="arrow_flag==1 && showFlag"
          @click="showFlag=false;arrow_flag = 0"
        >
          <div class="search-select" @click.stop>
            <div class="search-more area clearfix">
              <span style="font-weight: bold;" @click="reSet('gzdd')">全部</span>
              <span
                :class="{active:dqclassArr.indexOf(item.dmid)!=-1}"
                v-for="item in objSearchAll.cdg_regioncode"
                :key="item.dmid"
                @click="searchOption(item.dmid,'gzdd')"
              >{{item.dmmc}}</span>
            </div>
            <div class="search_btn_wrap">
              <div @click="reSet('gzdd')">重置</div>
              <div @click="befor_search()">确定</div>
            </div>
          </div>
        </div>
        <!-- 薪资 -->
        <div
          class="search-select-wrap"
          v-show="arrow_flag==4 && showFlag"
          @click="showFlag=false;arrow_flag = 0"
        >
          <div class="search-select" @click.stop>
            <co-form :model="form" ref="form">
              <co-input
                label="薪酬起"
                type="number"
                oninput="if(value.length>7)value=value.slice(0,7)"
                v-model="form.zdyx"
                placeholder="请输入薪酬起"></co-input>
              <co-input
                type="number"
                oninput="if(value.length>7)value=value.slice(0,7)"
                label="薪酬止"
                v-model="form.zgyx"
                placeholder="请输入薪酬止"></co-input>
            </co-form>
            <div class="search_btn_wrap">
              <div @click="reSet('zdyx,zgyx')">重置</div>
              <div @click="befor_search()">确定</div>
            </div>
          </div>
        </div>
        <!-- 其他 -->
        <div
          class="search-select-wrap"
          v-show="arrow_flag==5 && showFlag"
          @click="showFlag=false;arrow_flag = 0"
        >
          <div class="searchDiv">
            <div class="search-select" @click.stop>
              <div class="search-more clearfix">
                <p>学历：</p>
                <span
                  :class="resetObj.whcd == item.dmid?'active':''"
                  v-for="item in objSearchAll.zyjsww_d_xlyq"
                  :key="item.dmid"
                  @click="searchOption(item.dmid, 'whcd')"
                >{{item.dmmc}}</span>
              </div>
              <div class="search-more clearfix">
                <p>年龄：</p>
                <div class="nl">
                  <input
                    placeholder="最小年龄"
                    type="number"
                    oninput="if(value.length>2)value=value.slice(0,2)"
                    v-model="form.zxnl"
                  />
                  <input
                    placeholder="最大年龄"
                    type="number"
                    oninput="if(value.length>2)value=value.slice(0,2)"
                    v-model="form.zdnl"
                  />
                </div>
              </div>
              <div class="search-more clearfix">
                <p>用工形式：</p>
                <span
                  :class="resetObj.ygxs == item.dmid?'active':''"
                  v-for="item in objSearchAll.zyjs_d_dwygxs"
                  :key="item.dmid"
                  @click="searchOption(item.dmid, 'ygxs')"
                >{{item.dmmc}}</span>
              </div>
              <div class="search-more clearfix">
                <p>具有外语：</p>
                <span
                  :class="resetObj.jywy == item.dmid?'active':''"
                  v-for="item in jywyList"
                  :key="item.dmid"
                  @click="searchOption(item.dmid, 'jywy')"
                >{{item.dmmc}}</span>
              </div>
            </div>
            <div class="search_btn_wrap">
              <div @click="reSet('whcd,ygxs,jywy,zxnl,zdnl')">重置</div>
              <div @click="befor_search()">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="GET_search(0)"
      class="search-result"
    >
      <div class="recommend" v-show="tjrc">推荐人才</div>
      <position
        v-for="(item,index) in zpxx"
        :key="index"
        :visibleSlide="visibleSlide"
        :data="item"
        :showYs='false'
        @link="link_bank"
        @yyfn="yyfn"
      ></position>
    </van-list>
    <job-alert :visible.sync="visibleJob"></job-alert>
    <search-history :visible.sync="visibleHistory" :qwgjz.sync="form.qwgjz" :List="historyList" @search="GET_search"></search-history>
  </div>
</template>
<script>
import Position from "base/job/jobList";
import store from "@/store/index";
import coForm from "base/form/form";
import coInput from "base/form/input";
import PaginationList from "base/paginationList/paginationList";
import JobAlert from "base/indexAlert/alert";
import searchHistory from "base/searchHistory/history";

export default {
  name: "home",
  components: {
    Position,
    PaginationList,
    coForm,
    coInput,
    JobAlert,
    searchHistory
  },
  data() {
    return {
      tjrc: true, //推荐人才显隐
      showWord: true, //关键字
      finished: false, //下拉刷新
      loading: false, //下拉刷新
      visibleSlide: false,
      visibleJob: false, //发布职位弹框
      visibleHistory: false, //历史搜索弹框
      historyList: {}, //历史搜索数据
      zpxx: [],

      dqclassArr: [],
      hyclassArr: [],
      zyclassArr: [],
      resetObj: {
        dwzy:"",
        gzdd: "", // 工作地区
        zdyx: "", // 最低月薪
        zgyx: "", // 最高月薪

        ygxs: "", // 用工形式
        whcd: "", // 文化程度
        jywy: "", // 具有外语
        zxnl: "", //最小年龄
        zdnl: "" //最大年龄
      },
      jywyList: [
        { dmmc: "有", dmid: "1" },
        { dmmc: "无", dmid: "2" }
      ], // 有无外语
      objSearchAll: {
        cdg_regioncode: [],
        zyjsww_wh_cygwxxb: [],
        zyjsww_wh_cygwxxb_two: [],
        cdl_orgtype: [],
        // zyjs_d_qygm: [],
        zyjs_d_dwygxs: [],
        zyjsww_d_xlyq: [], //学历
        zyjsww_d_zyfbsj: [] //发布时间
        // zyjs_d_qwxcqj: [] //薪酬范围
      },
      form: {
        qwgjz: "",
        pageNum: 1,
        pageSize: "10",
        sfsccx: 1, //第一次进入标识（防止后台查不出数据）
        ywcz: 2,
        gzdd: [], // 工作地区
        dwzy:[],
        zdyx: "", // 最低月薪
        zgyx: "", // 最高月薪

        ygxs: "", // 用工形式
        whcd: "", // 文化程度
        jywy: "", // 具有外语
        zxnl: "", //最小年龄
        zdnl: "" //最大年龄
      },
      arrow_flag: false
    };
  },
  watch: {
    "form.qwgjz": function(val) {
      this.showWord = val ? false : true;
      // 清空标识，重新搜索
      this.$route.query.id = undefined;
    }
  },
  methods: {
    // 邀约事件
    yyfn(item) {
      this.$loading = true;
      this.$http({
        url: "/dwgl/jlckBc",
        method: "post",
        data: {
          dwdjid: item.dwdjid,
          jlid: item.jlid,
          jlly: 20,
          tdjlid: item.tdjlid,
          ckjlid: item.ckjlid
        }
      }).finally(()=>{
      this.$loading = false;
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          this.$router.push({
            path: "/resume/inviteInterview",
            query: {
              jlid: item.jlid,
              tdjlid: item.tdjlid,
              grqzid: item.grqzid,
              ckjlid: item.ckjlid || _res.ckjlid,
              fmstzly: 2
            }
          });
        } else {
          this.$alert({
            message: _res.message
          });
        }
      });
    },
    // link_bank跳转
    link_bank(item) {
      this.$loading = true;
      this.$http({
        url: "/dwgl/jlckBc",
        method: "post",
        data: {
          dwdjid: item.dwdjid,
          jlid: item.jlid,
          jlly: 20,
          tdjlid: item.tdjlid,
          ckjlid: item.ckjlid
        }
      }).finally(()=>{
      this.$loading = false;
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          this.$router.push({
            path: "/resume/resumeDetail",
            query: {
              jlid: item.jlid,
              tdjlid: item.tdjlid,
              fmstzly: 2,
              jlly: 20
            }
          });
        } else {
          this.$alert({
            message: _res.message
          });
        }
      });
    },
    // 重置
    reSet(type) {
      this.$modalHelper.beforeClose();
      if (type == "gzdd") {
        this.dqclassArr = [];
        this.form.gzdd = [];
      } else if (type == "dwzy") {
        this.zyclassArr = [];
        this.form.dwzy = [];
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "zyjsww_wh_cygwxxb"
            }
          })
          .then(res => {
            this.objSearchAll.zyjsww_wh_cygwxxb = res.returnData.dmblb;
            this.resetObj.dwzy = this.objSearchAll.zyjsww_wh_cygwxxb[0].dmid;
          })
          .finally(() => {
            this.$loading = false;
          });
      } else {
        var arr = type.split(",");
        for (let i in arr) {
          this.form[arr[i]] = "";
          this.resetObj[arr[i]] = "";
        }
      }
      this.GET_search(1);
    },
    //点击搜索条件添加选中样式
    searchOption(item, type, flag) {
      if (type == "gzdd") {
        this.setClass(item, this.dqclassArr);
        this.form[type] = this.dqclassArr;
      } else if (type == "dwzy" && flag) {
        this.setClass(item, this.zyclassArr);
        this.form[type] = this.zyclassArr;
      } else if (type == "dwzy" && !flag) {
        this.resetObj[type] = item;
        this.$http
          .get("/dmbgl/ycjdmbCx", {
            params: {
              table_name: "zyjsww_wh_cygwxxb",
              dmid: item
            }
          })
          .then(res => {
            this.objSearchAll.zyjsww_wh_cygwxxb_two = res.returnData.dmblb;
          })
      } else {
        // this.showFlag = 0;
        this.resetObj[type] = item;
        this.form[type] = item;
      }
    },
    //点击搜索条件确定
    befor_search() {
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert("薪酬起不能大于月薪止");
        return false;
      }
      if (parseInt(this.form.zdyx) > parseInt(this.form.zgyx)) {
        this.$alert("薪酬止不能小于月薪起");
        return false;
      }
      this.$modalHelper.beforeClose();
      // 清空标识，重新搜索
      this.$route.query.id = undefined;
      this.GET_search(1);
    },
    //点击搜索条件
    point(num) {
      this.$modalHelper.afterOpen();
      if (num != this.arrow_flag) {
        this.showFlag = true;
        this.arrow_flag = num;
      } else {
        this.showFlag = false;
        this.arrow_flag = 0;
      }
      if (!this.showFlag) {
        setTimeout(() => {
          if (
            this.$refs.scoll && this.$refs.scoll.scrollHeight + 376 >
            this.$store.state.winHeight
          ) {
            this.$modalHelper.beforeClose();
          }
        }, 100);
      }
    },
    // 搜索历史，职位
    GET_history(flag) {
      this.$loading = true;
      this.$http
        .get("/dwgl/sshxCx")
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            if (flag) {
              this.visibleJob = false;
            } else {
              this.visibleHistory = false;
              this.visibleJob = true;
            }
          } else {
            this.visibleHistory = true;
            this.visibleJob = false;
            this.historyList = data.zpxx; //岗位
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // 搜索职位
    GET_search(page = 1, i) {
      // 历史搜索查询
      if (page == 1 && i) {
        this.zpxx = [];
        this.form.qwgjz = i;
        this.form.pageNum = page;
        this.$route.query.id = undefined;
      }else if (page == 1){
        // 重置查询
        this.zpxx = [];
        this.form.pageNum = page;
      }else if (!page){
        // 下拉滑动查询
        this.form.pageNum = this.form.pageNum
      }
      Object.keys(this.form).forEach(item => {
        if (this.form[item] instanceof Array) {
          this.form[item] = this.form[item].toString();
        }
      });
      this.$http.get("/dwgl/jlxxCx", { params: this.form }).then(res => {
        sessionStorage.setItem('form', JSON.stringify(this.form));
        // 加载状态结束
        this.loading = false;
        this.finished = false;
        this.form.sfsccx = ""; //第一次进入标识，防止查不出数据 （空=》不是第一次）
        const data = res.returnData;
        // 无查询结果
        if (+data.executeResult === 0) {
          if (page === 1) {
            this.zpxx = [];
          }
          this.finished = true;
        } else {
          // 有数据
          this.zpxx.push(...data.jlxx);
          this.form.pageNum++;
          if (this.form.pageNum > res.pageCount) {
            // 数据加载完毕
            this.finished = true;
          }
        }
      });
      this.showFlag = 0;
    },
    //二级代码表
    secondDmb() {
      this.$http
        .get("/dmbgl/ycjdmbCx", {
          params: {
            table_name: "zyjsww_wh_cygwxxb"
          }
        })
        .then(res => {
          this.objSearchAll.zyjsww_wh_cygwxxb = res.returnData.dmblb;
          if (!this.form.dwzyfjdmid) {
            this.resetObj.dwzy = this.objSearchAll.zyjsww_wh_cygwxxb[0].dmid;
          }
          //查二级
          this.$http
            .get("/dmbgl/ycjdmbCx", {
              params: {
                table_name: "zyjsww_wh_cygwxxb",
                dmid: this.resetObj.dwzy
              }
            })
            .then(res => {
              this.objSearchAll.zyjsww_wh_cygwxxb_two = res.returnData.dmblb;
            });
        });
    },
    // 类名多选
    setClass(item, arr) {
      if (arr.indexOf(item) != -1) {
        arr.splice(arr.indexOf(item), 1);
      } else {
        arr.push(item);
      }
    },

    getDmb() {
      this.$http
        .get("/dmbgl/ycjdmbCx", {
          params: {
            table_name: "cdg_regioncode",
            dmid: "110000000000"
          }
        })
        .then(res => {
          this.objSearchAll.cdg_regioncode = res.returnData.dmblb;
          this.objSearchAll.cdg_regioncode.unshift({ dmmc: "北京市" });
        });
      this.$http
        .get("/dmbgl/dmblbCx", {
          params: {
            table_name:
              "zyjs_d_dwygxs,cdl_orgtype,zyjsww_d_xlyq,zyjsww_d_zyfbsj"
          }
        })
        .then(res => {
          this.objSearchAll.zyjs_d_dwygxs = res.returnData.dmblb.zyjs_d_dwygxs;
          this.objSearchAll.cdl_orgtype = res.returnData.dmblb.cdl_orgtype;
          this.objSearchAll.zyjsww_d_xlyq = res.returnData.dmblb.zyjsww_d_xlyq;
          this.objSearchAll.zyjsww_d_zyfbsj =
            res.returnData.dmblb.zyjsww_d_zyfbsj;
        });
    }
  },
  created() {
    this.getDmb();
    this.secondDmb();
  },
  mounted(){
    // 判断是否简历详情页面返回， 赋值搜索条件查询
    if(this.$route.query.id === 1){
      const GET_session = sessionStorage.getItem("form");
      this.form = JSON.parse(GET_session);
    }
    // 设置筛选条件选中样式
    Object.keys(this.resetObj).forEach(item => {
      this.resetObj[item] = this.form[item];
    });
    if (this.form.gzdd && this.form.gzdd.length > 0) {
      this.dqclassArr = this.form.gzdd.split(',');
    }else{
      this.dqclassArr = [];
    }
    if (this.form.dwzy && this.form.dwzy.length > 0) {
      this.zyclassArr = this.form.dwzy.split(',');
    }else{
      this.zyclassArr = [];
    }
  },
  beforeRouteEnter (to, from, next) {
    if(from.name == 'resumeDetail'){
      // 点击个人简历页面，返回设置标识
      to.query.id = 1;
    }
    next()
  },
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.home {
  .search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(90deg, #1d66d4, #00baff);
    .title {
      font-size: 38px;
      line-height: 114px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .notice {
      height: $radius-base4;
      line-height: $radius-base4;
      margin-top: $font-size-ts;
      font-size: $font-size-mini;
      border-radius: $font-size-ts;
      background-color: #fff;
      span {
        float: left;
        display: block;
        width: $height-width_line * 3;
        height: $radius-base4;
        line-height: $radius-base4;
        text-align: center;
        background-size: $radius-base2;
        box-sizing: border-box;
        border-radius: $font-size-ts 0 0 $font-size-ts;
        color: #fefefe;
        background-color: #ff9900;
      }
      .notice_content {
        position: relative;
        height: 100%;
        line-height: 1;
        margin-left: $height-width_line * 3;
        width: calc(100%-#{$height-width_line} * 3);
        overflow: hidden;
        div {
          position: absolute;
          height: 100%;
          line-height: 1;
          top: 0px;
          left: 0px;
          width: 2000px;
          overflow: hidden;
          -webkit-animation: scrollText2 30s infinite linear;
          animation: scrollText2 30s infinite linear;
          p {
            width: 500px;
            box-sizing: border-box;
            overflow: hidden;
            display: inline-block;
            height: $radius-base4;
            line-height: $radius-base4;
            background: url("~common/images/notice.png") $padding-base-half
              $margin-top no-repeat;
            background-size: $radius-base2;
            padding-left: $padding-base * 2;
          }
          p:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .input_tip {
      display: inline-block;
      position: absolute;
      top: $radius-base2;
      left: $padding-btn;
      font-size: $font-size-small;
      color: $color-text-placeholder;
      span {
        display: inline-block;
        vertical-align: sub;
        margin-left: $radius-base;
        height: $font-size-base;
        width: $font-size-base;
        background: url("~common/images/close.png") no-repeat;
        background-size: 100%;
      }
    }
    .searchBar {
      position: relative;
      width: 584px;
      font-size: $font-size-base;
      height: 66px;
      margin: 0 auto;
      margin-bottom: 20px;
      input {
        box-sizing: border-box;
        background-color: #fff;
        height: 66px;
        width: 100%;
        line-height: 66px;
        border-radius: $padding-base * 2;
        padding-left: $padding-base;
      }
      input::-webkit-input-placeholder {
        color: rgba(204, 204, 204, 1);
      }
      .searchIcon {
        position: absolute;
        color: #999;
        top: 0;
        left: 32px;
        height: 66px;
        line-height: 66px;
        font-size: 30px;
      }
      .icon-search:before {
        margin-right: 18px;
      }
    }
    .searchContent {
      background-color: #f1f1f1;
      border-bottom: 1px solid #f0f1f5;
      box-sizing: border-box;
      height: 100px;
      overflow: hidden;
      .bar_wrap {
        display: flex;
        height: 100%;
        line-height: 100%;
        background: #fff;
        border-radius: $radius-base3 $radius-base3 0 0;
        .item {
          flex: 1;
          font-size: $font-size-ultra / 2;
          padding: 35px 0 0 15px;
          position: relative;
          color: $color-text-title;
          background-color: #fff;
          border-bottom: 1px solid $color-text-placeholder;
          box-sizing: border-box;
          i {
            display: inline-block;
            height: 12px;
            width: 20px;
            vertical-align: middle;
            top: 0;
            right: 0;
          }
          .arrow::before {
            content: "";
            position: absolute;
            height: 12px;
            width: 20px;
            background: url("~common/images/index/arrow.png") 0 center no-repeat;
            background-size: 20px;
          }
        }
        .item:last-child {
          text-align: center;
        }
        .item:last-child .arrow::before {
          right: 42px;
        }
        .item:last-child:after {
          content: "";
        }
        ._active {
          color: #3366cc;
          .arrow::before {
            position: absolute;
            content: "";
            background: url("~common/images/index/arrow_.png") 0 center
              no-repeat;
            background-size: 20px;
          }
        }
      }

      .search-select-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 10;
        background: rgba($color: #000000, $alpha: 0.8);
      }
      .searchDiv {
        height: 45%;
        overflow: hidden;
        border-radius: 0 0 $radius-base3 $radius-base3;
        background-color: #fff;
      }
      .search-select {
        width: 100%;
        background-color: #fff;
        color: #3366cc;
        max-height: 90%;
        border-radius: 0 0 $radius-base3 $radius-base3;
        overflow: auto;
        /deep/ .form .weui-cells {
          margin-top: 0;
        }
        .search-select-content {
          height: $height-div * 10;
          width: 100%;
          background-color: #f4f4f4;
          .select-content-left {
            float: left;
            height: 100%;
            width: 50%;
            box-sizing: border-box;
            overflow: auto;
            p {
              padding: $font-size-base $radius-base4;
              background-color: #fff;
              color: #333;
              margin-top: 1px;
            }
            .active {
              color: #3366cc;
            }
          }
          .select-content-right {
            float: right;
            height: 100%;
            width: 50%;
            overflow: auto;
            padding: $radius-base3 $font-size-ultra-plus/4;
            box-sizing: border-box;
            p {
              color: #333;
              padding: $font-size-base/2 $radius-base4/2;
              margin-bottom: $font-size-base/2;
            }
            .active {
              color: #fff;
              background-color: #3366cc;
              border-radius: $padding-base-half;
            }
          }
        }
        .search-more {
          padding: $font-size-mini/2 $font-size-mini $font-size-mini/2
            $font-size-mini;
          padding-bottom: 0;
          span {
            float: left;
            margin: $padding-base-half 0;
            min-width: 156px;
            text-align: center;
          }
          .nl {
            input {
              margin: 20px 0;
              display: inline-block;
              text-align: center;
              width: 40%;
              height: 44px;
              line-height: 44px;
              background: #f0f1f5;
              margin-right: 84px;
            }
            input:last-child {
              margin-right: 0;
            }
          }
        }
        span {
          display: inline-block;
          padding: 15px;
        }
        div p {
          color: darkgray;
        }
        .active {
          color: #fff;
          background-color: #3366cc;
          border-radius: $padding-base-half;
        }
        .area span {
          margin: 0 10px 10px;
        }
      }
      .search_btn_wrap {
        display: flex;
        div {
          flex: 1;
          text-align: center;
          padding: 15px 0;
          background-color: #f7f8fa;
          border-radius: 0 0 $radius-base3 $radius-base3;
          color: #3366cc;
        }
        div:last-child {
          border-radius: 0 0 $radius-base3 0;
          background-color: #3366cc;
          color: #fff;
        }
      }
    }
  }
  .search-result {
    position: fixed;
    top: 300px;
    height: calc(100vh - 420px);
    width: 100%;
    overflow: auto;
    .recommend {
      height: 92px;
      line-height: 92px;
      color: #ff8f9e;
      font-size: 38px;
      background: url("~common/images/index/jian.png") 34px no-repeat;
      background-size: 38px;
      padding-left: 84px;
    }
  }
}
</style>
